
<template>
	<view class="page">
		<!-- 顶部导航栏 - 适老化优化 -->
		<view class="topbar safe-area-top">
			<text class="title elderly-text-large">首页</text>
			<view class="search-bar elderly-pressable" @tap="handleSearch">
				<image class="search-icon" src="/static/icons/search.svg" />
				<text class="search-text elderly-text">搜索新闻、服务...</text>
			</view>
			<view class="topbar-actions">
				<view class="action-btn elderly-pressable" @tap="handleScan">
					<image class="action-icon" src="/static/icons/scan.svg" />
					<text class="action-label">扫一扫</text>
		</view>
				<view class="action-btn elderly-pressable" @tap="handleNotification">
					<image class="action-icon" src="/static/icons/notification.svg" />
					<text class="action-label">消息</text>
			</view>
			</view>
		</view>

		<!-- 主要内容区域 -->
		<scroll-view 
			class="main-content" 
			scroll-y 
			:refresher-enabled="true"
			:refresher-triggered="refreshing"
			@refresherrefresh="handleRefresh"
			@scrolltolower="handleScrollToLower"
		>
			<!-- 用户状态卡片 -->
			<view class="status-card fade-in">
				<view class="greeting-section">
					<text class="greeting elderly-text-large">您好，{{userInfo.name}}！</text>
					<text class="weather-info elderly-text">{{weatherInfo.temp}} · {{weatherInfo.desc}}</text>
				</view>
				<view class="health-indicator">
					<view class="health-circle">
						<text class="health-score elderly-text-large">{{userInfo.healthIndex}}</text>
						<text class="health-label elderly-text">健康指数</text>
					</view>
				</view>
			</view>

			<!-- 核心服务网格 - 美化图标 -->
			<view class="services-section">
				<text class="section-title elderly-text-large">常用服务</text>
				<view class="services-grid">
					<view 
						class="service-card interactive scale-in" 
						v-for="(service, index) in enhancedServices" 
						:key="service.id"
						:style="{ animationDelay: (index * 0.1) + 's' }"
						@tap="handleServiceTap(service)"
					>
						<view class="service-icon" :style="{ background: service.gradient }">
							<text class="icon-emoji">{{service.emoji}}</text>
							<view class="icon-glow" v-if="service.badge"></view>
						</view>
						<text class="service-name elderly-text">{{service.name}}</text>
						<view class="service-badge" v-if="service.badge">
							<text class="badge-text">{{service.badge}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 语音助手卡片 - 增强版 -->
			<view class="voice-card interactive">
				<view class="voice-header">
					<text class="voice-title elderly-text-large">🎤 智能语音助手</text>
					<view class="voice-status" :class="{ active: voiceEnabled }">
						<text class="status-text elderly-text">{{voiceEnabled ? '已开启' : '已关闭'}}</text>
					</view>
				</view>
				<view class="voice-examples">
					<text class="examples-title elderly-text">试试这样说：</text>
					<view class="examples-grid">
						<view 
							class="example-chip interactive" 
							v-for="(example, index) in enhancedVoiceExamples" 
							:key="index" 
							@tap="handleVoiceExample(example)"
						>
							<text class="example-text elderly-text">{{example.text}}</text>
							<text class="example-icon">{{example.icon}}</text>
						</view>
					</view>
				</view>
			</view>

			<!-- 新闻资讯卡片 - 分类标签 -->
			<view class="news-section">
				<view class="news-header">
					<text class="news-title elderly-text-large">📰 今日资讯</text>
					<view class="news-categories">
						<view 
							class="category-tag interactive" 
							v-for="category in newsCategories" 
							:key="category.id"
							:class="{ active: currentCategory === category.id }"
							@tap="handleCategoryChange(category.id)"
						>
							<text class="category-text elderly-text">{{category.name}}</text>
						</view>
					</view>
				</view>
				<view class="news-list">
					<view 
						class="news-card interactive slide-up" 
						v-for="(news, index) in filteredNews" 
						:key="news.id"
						:style="{ animationDelay: (index * 0.1) + 's' }"
						@tap="handleNewsTap(news)"
					>
						<view class="news-content">
							<view class="news-meta">
								<text class="news-category-tag" :style="{ background: news.categoryColor }">{{news.category}}</text>
								<text class="news-time elderly-text">{{news.time}}</text>
							</view>
							<text class="news-title-text elderly-text">{{news.title}}</text>
							<text class="news-source elderly-text">{{news.source}}</text>
						</view>
						<view class="news-play-btn interactive" @tap.stop="playNews(news)">
							<text class="play-icon">▶️</text>
						</view>
					</view>
				</view>
			</view>
            </scroll-view>

		<!-- 悬浮紧急按钮 -->
		<emergency-sos 
			:visible="sosVisible"
			:countdown="sosCountdown"
			:contacts="emergencyContacts"
			@sos-open="handleSosOpen"
			@sos-close="handleSosClose"
			@sos-call="handleSosCall"
			@contact-call="handleContactCall"
		/>

		<!-- 全局加载状态 -->
		<loading-overlay :show="globalLoading" message="加载中..." />
	</view>
</template>

<script>
import { storageManager } from '@/utils/storage-simple.js'
import { hapticLight, playSfx } from '@/utils/interaction.js'

// 组件导入
import UserStatusPanel from '@/components/user-status-panel/index.vue'
import VoiceConsole from '@/components/voice-console/index.vue'
import ServiceGrid from '@/components/service-grid/index.vue'
import NewsFeed from '@/components/news-feed/index.vue'
import EmergencySos from '@/components/emergency-sos/index.vue'
import LoadingOverlay from '@/components/loading-overlay/index.vue'

export default {
	components: {
		UserStatusPanel,
		VoiceConsole,
		ServiceGrid,
		NewsFeed,
		EmergencySos,
		LoadingOverlay
	},
	
	data() {
		return {
			// 响应式数据
			globalLoading: false,
			refreshing: false,
			
			// 用户数据
			userInfo: {
				name: '张爷爷',
				avatar: '/static/default-avatar.svg',
				age: 68,
				level: 5,
				healthIndex: 88,
				continuousSignIn: 7
			},
			
			// 天气数据
			weatherInfo: {
				temp: '24°C',
				desc: '晴朗',
				suitable: '宜外出'
			},
			
			// 任务数据
			taskInfo: {
				completed: 3,
				total: 5,
				todayTasks: [
					{ id: 1, name: '早晨散步', done: true },
					{ id: 2, name: '按时服药', done: true },
					{ id: 3, name: '午休30分钟', done: true },
					{ id: 4, name: '下午社区活动', done: false },
					{ id: 5, name: '晚饭后遛弯', done: false }
				]
			},
			
			// 语音状态
			voice: {
				listening: false,
				recognizing: false,
				recognizedText: '',
				recordPath: '',
				recordDuration: 0
			},
			
			// 新闻数据
			newsChannels: [
				{ id: 'recommend', name: '推荐', hasNew: true },
				{ id: 'hot', name: '热点', hasNew: false },
				{ id: 'health', name: '健康', hasNew: false },
				{ id: 'community', name: '社区', hasNew: true }
			],
			currentChannel: 'recommend',
			newsList: [
				{ 
					id: 'n1', 
					title: '社区养老服务新举措，让老年生活更美好', 
					icon: '/static/parcel.svg',
					image: 'https://via.placeholder.com/100',
					source: '社区通知',
					time: '1小时前',
					read: false,
					isNew: true
				},
				{ 
					id: 'n2', 
					title: '老年大学秋季招生开始啦，多门课程等你来', 
					icon: '/static/ticket.svg',
					image: 'https://via.placeholder.com/100',
					source: '教育资讯',
					time: '2小时前',
					read: false,
					isNew: true
				}
			],
			topNews: [
				{
					id: 't1',
					title: '下午3点用药提醒 - 请准时服用降压药',
					image: 'https://via.placeholder.com/100',
					source: '健康助手',
					time: '刚刚'
				}
			],
			newsLoading: false,
			newsRefreshing: false,
			newsNoMore: false,
			
			// 紧急联系人
			sosVisible: false,
			sosCountdown: 5,
			emergencyContacts: [
				{ 
					id: 1, 
					name: '儿子', 
					phone: '138****1234', 
					icon: '👨',
					isPrimary: true
				},
				{ 
					id: 2, 
					name: '女儿', 
					phone: '139****5678', 
					icon: '👩',
					isPrimary: false
				},
				{ 
					id: 3, 
					name: '社区医生', 
					phone: '136****9012', 
					icon: '👨‍⚕️',
					isPrimary: false
				}
			],
			
			// 增强版服务配置 - 美化图标
			enhancedServices: [
				{
					id: 'payment',
					name: '生活缴费',
					emoji: '💳',
					gradient: 'linear-gradient(135deg, #FF7E29, #FFD166)',
					url: '/pages/services/services?category=payment',
					badge: false
				},
				{
					id: 'medicine',
					name: '药品识别',
					emoji: '💊',
					gradient: 'linear-gradient(135deg, #4A90E2, #6DD400)',
					url: '/pages/ocr/ocr',
					badge: '新'
				},
				{
					id: 'health',
					name: '健康咨询',
					emoji: '❤️',
					gradient: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					url: '/pages/ai/ai',
					badge: false
				},
				{
					id: 'transport',
					name: '出行叫车',
					emoji: '🚗',
					gradient: 'linear-gradient(135deg, #6DD400, #4A90E2)',
					url: '/pages/services/services?category=transport',
					badge: false
				},
				{
					id: 'emergency',
					name: '紧急求助',
					emoji: '🚨',
					gradient: 'linear-gradient(135deg, #FF375F, #FF7E29)',
					url: '',
					badge: '紧急'
				},
				{
					id: 'volunteer',
					name: '呼叫志愿者',
					emoji: '🤝',
					gradient: 'linear-gradient(135deg, #9D4EDD, #4A90E2)',
					url: '/pages/volunteer/register',
					badge: false
				}
			],
			
			// 增强版语音指令
			enhancedVoiceExamples: [
				{ text: '帮我缴电费', icon: '💳' },
				{ text: '识别这个药品', icon: '💊' },
				{ text: '帮我叫个车', icon: '🚗' },
				{ text: '查看健康信息', icon: '❤️' },
				{ text: '预约挂号', icon: '🏥' },
				{ text: '查询天气详情', icon: '🌤️' },
				{ text: '紧急求助', icon: '🚨' },
				{ text: '呼叫志愿者', icon: '🤝' }
			],
			
			// 新闻分类
			newsCategories: [
				{ id: 'all', name: '全部' },
				{ id: 'policy', name: '养老政策' },
				{ id: 'health', name: '健康养生' },
				{ id: 'entertainment', name: '老年娱乐' },
				{ id: 'community', name: '社区动态' }
			],
			currentCategory: 'all',
			
			// 增强版新闻数据
			enhancedNewsList: [
				{
					id: 1,
					title: '社区养老服务新举措，让老年生活更美好',
					category: '养老政策',
					categoryColor: 'linear-gradient(135deg, #FF7E29, #FFD166)',
					source: '社区通知',
					time: '1小时前',
					audio: true
				},
				{
					id: 2,
					title: '老年大学秋季招生开始啦，多门课程等你来',
					category: '老年娱乐',
					categoryColor: 'linear-gradient(135deg, #4A90E2, #6DD400)',
					source: '教育资讯',
					time: '2小时前',
					audio: true
				},
				{
					id: 3,
					title: '冬季养生小贴士，让您健康过冬',
					category: '健康养生',
					categoryColor: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					source: '健康时报',
					time: '4小时前',
					audio: true
				},
				{
					id: 4,
					title: '智能穿戴设备，守护您的健康',
					category: '健康养生',
					categoryColor: 'linear-gradient(135deg, #FF6B6B, #FF8E8E)',
					source: '科技前沿',
					time: '6小时前',
					audio: true
				}
			]
		}
	},
	
	onLoad() {
		this.initializePage()
	},
	
	onShow() {
		// 页面显示时刷新必要数据
		this.refreshUserData()
		this.checkNewsUpdate()
	},
	
	onUnload() {
		// 清理资源
		this.clearTimers()
	},
	
	computed: {
		// 过滤后的新闻列表
		filteredNews() {
			if (this.currentCategory === 'all') {
				return this.enhancedNewsList
			}
			return this.enhancedNewsList.filter(news => {
				const categoryMap = {
					'policy': '养老政策',
					'health': '健康养生',
					'entertainment': '老年娱乐',
					'community': '社区动态'
				}
				return news.category === categoryMap[this.currentCategory]
			})
		}
	},
	
	methods: {
		// 页面初始化
		async initializePage() {
			this.globalLoading = true
			
			try {
				// 模拟加载数据
				await this.loadUserData()
				await this.loadNewsData()
				await this.loadEmergencyContacts()
				
			} catch (error) {
				console.error('页面初始化失败:', error)
				uni.showToast({
					title: '加载失败，请重试',
					icon: 'none'
				})
			} finally {
				this.globalLoading = false
			}
		},
		
		// 加载用户数据
		async loadUserData() {
			return new Promise((resolve) => {
				setTimeout(() => {
					console.log('用户数据加载完成')
					resolve(true)
				}, 300)
			})
		},
		
		// 加载新闻数据
		async loadNewsData() {
			this.newsLoading = true
			return new Promise((resolve) => {
				setTimeout(() => {
					console.log('新闻数据加载完成')
					this.newsLoading = false
					resolve(true)
				}, 500)
			})
		},
		
		// 加载紧急联系人
		async loadEmergencyContacts() {
			// 使用默认联系人数据
			console.log('紧急联系人加载完成')
		},
		
		// 事件处理函数
		handleSearch() {
			uni.navigateTo({
				url: '/pages/search/index'
			})
		},
		
		handleScan() {
			uni.scanCode({
				success: (res) => {
					console.log('扫描结果:', res.result)
					this.handleScanResult(res.result)
				},
				fail: (err) => {
					console.error('扫描失败:', err)
					uni.showToast({
						title: '扫描失败',
						icon: 'none'
					})
				}
			})
		},
		
		handleNotification() {
			uni.navigateTo({
				url: '/pages/notification/index'
			})
		},
		
		async handleRefresh() {
			if (this.refreshing) return
			
			this.refreshing = true
			try {
				await this.refreshUserData()
				await this.refreshNews()
				uni.showToast({
					title: '刷新成功',
					icon: 'success'
				})
			} catch (error) {
				console.error('下拉刷新失败:', error)
			} finally {
				this.refreshing = false
			}
		},
		
		handleScrollToLower() {
			if (!this.newsNoMore && !this.newsLoading) {
				this.loadMoreNews()
			}
		},
		
		handleServiceTap(service) {
			// 触觉反馈
			hapticLight()
			
			// 服务路由映射
			const serviceRoutes = {
				'payment': '/pages/services/services?category=payment',
				'medicine': '/pages/ocr/ocr',
				'health': '/pages/ai/ai',
				'transport': '/pages/services/services?category=transport',
				'volunteer': '/pages/volunteer/register'
			}
			
			if (service.id === 'emergency') {
				this.handleEmergencySos()
			} else if (serviceRoutes[service.id]) {
				uni.navigateTo({ url: serviceRoutes[service.id] })
			} else {
				uni.showToast({
					title: `${service.name}功能开发中`,
					icon: 'none'
				})
			}
		},
		
		// 语音示例点击
		handleVoiceExample(example) {
			hapticLight()
			// 跳转到AI页面并传递指令
			uni.navigateTo({
				url: `/pages/ai/ai?command=${encodeURIComponent(example.text)}`
			})
		},
		
		// 新闻分类切换
		handleCategoryChange(categoryId) {
			hapticLight()
			this.currentCategory = categoryId
		},
		
		// 播放新闻
		playNews(news) {
			hapticLight()
			uni.showToast({
				title: `播放: ${news.title}`,
				icon: 'none'
			})
			// 这里可以集成语音合成API
		},
		
		// 紧急求助
		handleEmergencySos() {
			uni.showModal({
				title: '紧急求助',
				content: '是否立即拨打紧急联系人电话？',
				confirmText: '立即拨打',
				cancelText: '取消',
				success: (res) => {
					if (res.confirm) {
						uni.makePhoneCall({
							phoneNumber: '120' // 实际应用中从用户设置获取
						})
					}
				}
			})
		},
		
		handleChannelChange(channelId) {
			this.currentChannel = channelId
			this.newsNoMore = false
			this.loadNewsData()
		},
		
		handleNewsTap(newsItem) {
			// 记录阅读历史
			storageManager.addReadHistory && storageManager.addReadHistory(newsItem)
			
			uni.showToast({
				title: `查看：${newsItem.title}`,
				icon: 'none'
			})
		},
		
		handleNewsRefresh() {
			this.refreshNews()
		},
		
		handleNewsLoadMore() {
			this.loadMoreNews()
		},
		
		// 语音控制
		handleVoiceStart() {
			this.voice.listening = true
			// 触觉反馈
			if (uni.vibrateShort) {
				try { uni.vibrateShort({ type: 'medium' }) } catch(e){}
			}
		},
		
		handleVoiceEnd() {
			this.voice.listening = false
			this.voice.recognizing = true
			
			// 模拟语音识别
			setTimeout(() => {
				this.voice.recognizing = false
				this.voice.recognizedText = '已识别语音指令'
				
				// 触觉反馈
				if (uni.vibrateShort) {
					try { uni.vibrateShort({ type: 'light' }) } catch(e){}
				}
			}, 1000)
		},
		
		// 紧急功能
		handleSosOpen() {
			this.sosVisible = true
			this.startSosCountdown()
		},
		
		handleSosClose() {
			this.clearTimers()
			this.sosVisible = false
			this.sosCountdown = 5
		},
		
		handleSosCall() {
			const primaryContact = this.emergencyContacts.find(c => c.isPrimary) || this.emergencyContacts[0]
			if (primaryContact) {
				uni.makePhoneCall({
					phoneNumber: primaryContact.phone
				})
			}
			this.handleSosClose()
		},
		
		handleContactCall(contact) {
			uni.makePhoneCall({
				phoneNumber: contact.phone
			})
			this.handleSosClose()
		},
		
		// 工具函数
		handleScanResult(result) {
			if (result.startsWith('http')) {
				uni.navigateTo({
					url: `/pages/webview?url=${encodeURIComponent(result)}`
				})
			} else if (/^1[3-9]\d{9}$/.test(result)) {
				uni.makePhoneCall({
					phoneNumber: result
				})
			} else {
				uni.showModal({
					title: '扫描结果',
					content: result,
					showCancel: false
				})
			}
		},
		
		async refreshUserData() {
			await this.loadUserData()
		},
		
		async refreshNews() {
			this.newsRefreshing = true
			await this.loadNewsData()
			this.newsRefreshing = false
		},
		
		async loadMoreNews() {
			this.newsLoading = true
			setTimeout(() => {
				this.newsLoading = false
				this.newsNoMore = true
			}, 1000)
		},
		
		checkNewsUpdate() {
			// 检查新闻更新
		},
		
		startSosCountdown() {
			this.clearTimers()
			this.sosCountdown = 5
			this.sosTimer = setInterval(() => {
				if (this.sosCountdown <= 1) {
					this.handleSosCall()
				} else {
					this.sosCountdown -= 1
				}
			}, 1000)
		},
		
		clearTimers() {
			if (this.sosTimer) {
				clearInterval(this.sosTimer)
				this.sosTimer = null
			}
		}
	}
}
</script>

<style scoped lang="scss">
.page {
	min-height: 100vh;
	background: $theme-bg;
}

/* 顶部导航栏 - 适老化优化 */
.topbar {
	position: sticky;
	top: 0;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: $elderly-spacing-base $elderly-spacing-lg;
	background: $elderly-bg-primary;
	backdrop-filter: blur(20rpx);
	border-bottom: 2rpx solid $elderly-border;
	z-index: 100;
	box-shadow: $elderly-shadow-sm;
}

.title {
	font-size: $elderly-font-xl;
	font-weight: 700;
	color: $elderly-text-primary;
	letter-spacing: 2rpx;
}

.search-bar {
	flex: 1;
	min-height: $elderly-touch-lg;
	background: $elderly-bg-secondary;
	border-radius: $elderly-radius-lg;
	display: flex;
	align-items: center;
	padding: 0 $elderly-spacing-base;
	margin: 0 $elderly-spacing-base;
	border: 2rpx solid $elderly-border;
}

.search-icon {
	width: 40rpx;
	height: 40rpx;
	margin-right: $elderly-spacing-sm;
	opacity: 0.7;
}

.search-text {
	font-size: $elderly-font-base;
	color: $elderly-text-secondary;
}

.topbar-actions {
	display: flex;
	gap: $elderly-spacing-sm;
}

.action-btn {
	display: flex;
	flex-direction: column;
	align-items: center;
	padding: $elderly-spacing-xs;
	min-width: $elderly-touch-sm;
	min-height: $elderly-touch-sm;
}

.action-icon {
	width: 48rpx;
	height: 48rpx;
	opacity: 0.8;
	margin-bottom: 4rpx;
}

.action-label {
	font-size: $elderly-font-xs;
	color: $elderly-text-secondary;
	text-align: center;
}

/* 主要内容区域 */
.main-content {
	height: calc(100vh - 200rpx);
	padding-bottom: 120rpx;
}

/* 用户状态卡片 */
.status-card {
	background: $grad-sunrise;
	margin: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	display: flex;
	justify-content: space-between;
	align-items: center;
	box-shadow: $elderly-shadow-base;
}

.greeting-section {
	flex: 1;
}

.greeting {
	color: #FFFFFF;
	font-weight: 700;
	margin-bottom: $elderly-spacing-xs;
}

.weather-info {
	color: rgba(255, 255, 255, 0.9);
	font-size: $elderly-font-base;
}

.health-indicator {
	text-align: center;
}

.health-circle {
	width: 120rpx;
	height: 120rpx;
	border-radius: 60rpx;
	background: rgba(255, 255, 255, 0.2);
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	border: 4rpx solid rgba(255, 255, 255, 0.3);
}

.health-score {
	color: #FFFFFF;
	font-weight: 700;
	line-height: 1;
}

.health-label {
	color: rgba(255, 255, 255, 0.9);
	font-size: $elderly-font-sm;
	margin-top: 4rpx;
}

/* 服务区域 */
.services-section {
	margin: $elderly-spacing-base;
}

.section-title {
	color: $elderly-text-primary;
	font-weight: 700;
	margin-bottom: $elderly-spacing-base;
}

.services-grid {
	display: grid;
	grid-template-columns: repeat(3, 1fr);
	gap: $elderly-spacing-base;
}

.service-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	display: flex;
	flex-direction: column;
	align-items: center;
	text-align: center;
	box-shadow: $elderly-shadow-sm;
	position: relative;
	min-height: 160rpx;
	transition: all 0.3s ease;
}

.service-card:hover {
	transform: translateY(-4rpx);
	box-shadow: $elderly-shadow-lg;
}

.service-icon {
	width: 80rpx;
	height: 80rpx;
	border-radius: 40rpx;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-bottom: $elderly-spacing-sm;
	box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.15);
	position: relative;
}

.icon-emoji {
	font-size: $elderly-font-xl;
}

.icon-glow {
	position: absolute;
	top: -4rpx;
	right: -4rpx;
	width: 20rpx;
	height: 20rpx;
	border-radius: 50%;
	background: $theme-coral;
	animation: pulse 1s ease-in-out infinite;
}

.service-name {
	color: $elderly-text-primary;
	font-weight: 600;
	text-align: center;
}

.service-badge {
	position: absolute;
	top: 8rpx;
	right: 8rpx;
	background: $theme-coral;
	border-radius: 12rpx;
	padding: 4rpx 8rpx;
}

.badge-text {
	color: #FFFFFF;
	font-size: $elderly-font-xs;
	font-weight: 600;
}

/* 语音助手卡片 */
.voice-card {
	background: $theme-card;
	margin: $elderly-spacing-base;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
}

.voice-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
}

.voice-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.voice-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.voice-status {
	padding: $elderly-spacing-xs $elderly-spacing-sm;
	border-radius: $elderly-radius-base;
	background: $theme-warm-gray;
	transition: all 0.3s ease;
}

.voice-status.active {
	background: $grad-health;
	color: #FFFFFF;
}

.status-text {
	font-size: $elderly-font-sm;
	font-weight: 600;
}

.voice-examples {
	margin-top: $elderly-spacing-base;
}

.examples-title {
	color: $elderly-text-secondary;
	font-weight: 600;
	margin-bottom: $elderly-spacing-sm;
}

.examples-grid {
	display: grid;
	grid-template-columns: repeat(2, 1fr);
	gap: $elderly-spacing-sm;
}

.example-chip {
	background: $theme-warm-gray;
	border-radius: $elderly-radius-base;
	padding: $elderly-spacing-sm $elderly-spacing-base;
	display: flex;
	align-items: center;
	justify-content: space-between;
	border: 2rpx solid transparent;
	transition: all 0.2s ease;
}

.example-chip:hover {
	background: $theme-card;
	border-color: $theme-orange;
	transform: translateY(-2rpx);
}

.example-text {
	color: $elderly-text-primary;
	font-size: $elderly-font-sm;
}

.example-icon {
	font-size: $elderly-font-base;
}

/* 新闻区域 */
.news-section {
	margin: $elderly-spacing-base;
}

.news-header {
	display: flex;
	justify-content: space-between;
	align-items: center;
	margin-bottom: $elderly-spacing-base;
}

.news-title {
	color: $elderly-text-primary;
	font-weight: 700;
}

.news-categories {
	display: flex;
	gap: $elderly-spacing-xs;
	overflow-x: auto;
}

.category-tag {
	padding: $elderly-spacing-xs $elderly-spacing-sm;
	border-radius: $elderly-radius-base;
	background: $theme-warm-gray;
	border: 2rpx solid transparent;
	transition: all 0.2s ease;
	white-space: nowrap;
}

.category-tag.active {
	background: $grad-sunrise;
	color: #FFFFFF;
	border-color: $theme-orange;
}

.category-text {
	font-size: $elderly-font-sm;
	font-weight: 600;
}

.news-list {
	display: flex;
	flex-direction: column;
	gap: $elderly-spacing-sm;
}

.news-card {
	background: $theme-card;
	border-radius: $elderly-radius-lg;
	padding: $elderly-spacing-lg;
	display: flex;
	align-items: center;
	justify-content: space-between;
	box-shadow: $elderly-shadow-sm;
	transition: all 0.3s ease;
	border: 2rpx solid transparent;
}

.news-card:hover {
	transform: translateY(-2rpx);
	box-shadow: $elderly-shadow-base;
	border-color: $theme-orange;
}

.news-content {
	flex: 1;
}

.news-meta {
	display: flex;
	align-items: center;
	gap: $elderly-spacing-sm;
	margin-bottom: $elderly-spacing-xs;
}

.news-category-tag {
	padding: 4rpx 8rpx;
	border-radius: 8rpx;
	font-size: $elderly-font-xs;
	color: #FFFFFF;
	font-weight: 600;
}

.news-time {
	color: $elderly-text-secondary;
	font-size: $elderly-font-xs;
}

.news-title-text {
	color: $elderly-text-primary;
	font-weight: 600;
	margin-bottom: 4rpx;
	line-height: 1.4;
}

.news-source {
	color: $elderly-text-secondary;
	font-size: $elderly-font-sm;
}

.news-play-btn {
	width: 60rpx;
	height: 60rpx;
	border-radius: 30rpx;
	background: $grad-sunrise;
	display: flex;
	align-items: center;
	justify-content: center;
	margin-left: $elderly-spacing-sm;
	transition: all 0.2s ease;
}

.news-play-btn:hover {
	transform: scale(1.1);
	box-shadow: 0 4rpx 12rpx rgba(255, 126, 41, 0.3);
}

.play-icon {
	font-size: $elderly-font-base;
}

/* 安全区域适配 */
.safe-area-top {
	padding-top: env(safe-area-inset-top);
}

/* 响应式适配 */
@media screen and (max-width: 750rpx) {
	.search-bar {
		margin: 0 16rpx;
	}
	
	.topbar-actions {
		gap: 12rpx;
	}
}
</style>

